<template>
    <el-cascader 
        :props="props"
        v-bind="$attrs"
        ref="cascader"
        v-if="isCurrentVal"
        @change="changeValue"
        :placeholder="placeholder"
        v-model="currentVal"
    >
    </el-cascader>
</template>

<script>
import { defineComponent } from "vue";
import request from 'src/utils/request'

export default defineComponent({
    name: "CommityPicker",
    data() {
        return{
            props: {
                lazy: true,  // 懒加载
                lazyLoad: this.lazyLoad, //数据方法
                multiple:this.$attrs.multiple || false, // true多选 false单选,
                checkStrictly:this.$attrs.checkStrictly || false , // true 任意选择 false 严格父子关联
                value: "value", // 自定义要映射的键名
                label: "label",
            },
            placeholder:this.$attrs.placeholder || "请选择所属社区",
            // this.$attrs.leafLevel, // 控制只需要加载到哪个层级 从0开始
            currentVal: [],
            leafLevel: 4,
            isCurrentVal:true
        }
    },
    methods: {
        //  基础信息-物业项目管理-社区data
        getCascaderData(data) {
            return request({
                url: '/resource/info/getProvincialLeagueData',
                method: 'post',
                data
            })
        },
        // 省 市 区 街道 社区
        async lazyLoad(node, resolve){
            const { level } = node;
            let nodes = [];
            let query = new Object()
            // query.orgId = this.$store.getters.vid;
            switch (level) {
                // 省
                case 0 :
                    query.type = "province";
                    query.id = '';
                    nodes = await this.getCascaderData(query).then(response => {
                        if(response.success == true) {
                            response.data.forEach((item)=>{
                                item.label = item.name;
                                item.value = item.id;
                                item.leaf = node.level >= this.leafLevel
                            });
                            return response.data
                        }
                    });
                    break;
                // 市
                case 1 :
                    query.type = "city";
                    query.id = node.data.id;
                    query.name = node.data.name;
                    nodes = await this.getCascaderData(query).then(response => {
                        if(response.success == true) {
                            response.data.forEach((item)=>{
                                item.label = item.name;
                                item.value = item.id;
                                item.leaf = node.level >= this.leafLevel
                            });
                            return response.data
                        }
                    });
                    break;
                // 区
                case 2 :
                    query.type = "district";
                    query.id = node.data.id;
                    query.name = node.data.name;
                    nodes = await this.getCascaderData(query).then(response => {
                        if(response.success == true) {
                            response.data.forEach((item)=>{
                                item.label = item.name;
                                item.value = item.id;
                                item.leaf = node.level >= this.leafLevel
                            });
                            return response.data
                        }
                    });
                    break;
                // 街道
                case 3 :
                    query.type = "street";
                    query.id = node.data.id;
                    query.name = node.data.name;
                    nodes = await this.getCascaderData(query).then(response => {
                        if(response.success == true) {
                            response.data.forEach((item)=>{
                                item.label = item.name;
                                item.value = item.id;
                                item.leaf = node.level >= this.leafLevel
                            });
                            return response.data
                        }
                    });
                    break;
                // 社区
                case 4 :
                    query.type = "community";
                    query.id = node.data.id;
                    query.name = node.data.name;
                    nodes = await this.getCascaderData(query).then(response => {
                        if(response.success == true) {
                            response.data.forEach((item)=>{
                                item.label = item.name;
                                item.value = item.id;
                                item.leaf = true
                            });
                            return response.data
                        }
                    });
                    break
            }
            resolve(nodes);
        },
        changeValue(val){
            let checkedNodes = this.$refs.cascader.getCheckedNodes()[0]
            let checkedList = val.map((v,i)=>{
                return {
                    id: v,
                    name: checkedNodes.pathLabels[i]
                }
            })
            this.$emit("emit-cascader-value",checkedList);
        },
        // 重置
        reset(){
            this.$refs.cascader.$refs.panel.checkedValue = [];
            this.$refs.cascader.$refs.panel.clearCheckedNodes();
            this.$refs.cascader.$refs.panel.activePath = [];
            this.currentVal = [];
        },
        setVal(val){
            this.isCurrentVal = false;
            this.$nextTick(()=>{
                this.isCurrentVal = true;
                this.currentVal = val;
            })
        }
    }
})


</script>

<style scoped>

</style>